<script setup lang="ts">
  import topBanner from "./top-banner.vue";
  import LeiXing from "@/components/lei-xing"; //项目类型
  import WenTi from "@/components/wen-ti"; //问题类型
  import ZhengGai from "@/components/zheng-gai"; //整改情况
  import JinDu from "@/components/jin-du"; //项目进度
  import RenYuan from "@/components/ren-yuan"; //人员情况
  import projectType from "./project-type.vue";
  import typeQuestion from "./type-question.vue";
  import projectSchedule from "./project-schedule.vue";
  import situationRectification from "./situation-rectification.vue";
  import reny01 from "./reny01.vue";
  import reny02 from "./reny02.vue";
  import reny03 from "./reny03.vue";
  import reny04 from "./reny04.vue";
</script>

<template>
    <div class="_banner">
      <topBanner></topBanner>
    </div>
    
    <div class="top-box">
      <div class="index-box">
        <div class="contetn_left">
          <LeiXing class="contetn_lr-item leixin" title="项目类型">
            <projectType />
          </LeiXing>
        </div>
        <div class="contetn_left">
          <JinDu class="contetn_lr-item" title="项目进度">
            <projectSchedule />
          </JinDu>
        </div>
      </div>

      <div class="index-box-right">
          <div class="contetn_left contetn_left1">
              <WenTi class="contetn_lr-item" title="问题类型">
                <typeQuestion />
              </WenTi>
              <ZhengGai class="contetn_lr-item" title="整改情况">
                <situationRectification />
              </ZhengGai>
          </div>
          <div class="contetn_left contetn_left1">
            <RenYuan class="contetn_lr-item" title="人员情况"> 
              <div class="conten_footer">
                <div class="conten_footer1">
                  <reny01></reny01>
                </div>
                <div class="conten_footer1">
                  <reny02></reny02>
                </div>
                <div class="conten_footer1">
                  <reny03></reny03>
                </div>
                <div class="conten_footer1">
                  <reny04></reny04>
                </div>
              </div>
          </RenYuan>
        </div> 
        </div>
    </div>
    
</template>

<style scoped lang="scss">
.conten_footer {
  display: flex;
  justify-content: space-between;
  height: 330px;
  margin-top: 20px;
  gap: 10px; /* 使用 gap 控制小盒子之间的间距 */
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px; /* 父容器的左右内边距 */
}

.conten_footer1 {
  flex: 1 1 0; /* 小盒子均匀分配可用空间 */
  min-width: 0; /* 允许在空间不足时缩小到最小 */
  background: #f5f5f5;
  box-sizing: border-box;
}
.top-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  min-height: calc(100% - 64px);
}
.index-box {
  width: 45%; /* 调整宽度以减少左右间隙 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 控制内部组件之间的间隙 */
  padding-left: 9px;
  margin-bottom: 10px;
}
.index-box-right {
  width: 55%; /* 调整宽度以减少左右间隙 */
  display: flex;
  flex-direction: column;
  gap: 8px; /* 控制内部组件之间的间隙 */
}
.top_banner {
  /* 可添加顶部 banner 的样式 */
}
.contetn_left,
.contetn_left1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* 新增水平居中 */
  position: relative;
  width: 830px;
  height: 400px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.contetn_left1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.contetn_lr-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%; /* 确保容器撑满父级容器 */
  box-sizing: border-box;
}


</style>
